<template>
  <div class="layout-padding-auto layout-padding-view">
    <!--region 搜索区域-->
    <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList" >
      <el-form-item :label="$t('checkStock.materialCode')" prop="materialCode">
        <el-input :placeholder="$t('form.pleaseInput',[$t('checkStock.materialCode')])"
                  v-model="state.queryForm.materialCode" clearable
                  style="width: 160px"/>

      </el-form-item>
			<el-form-item label="条码" prop="barcode">
				<el-input
					v-model="state.queryForm.barcode" clearable
					style="width: 160px"/>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList" icon="search" type="primary">
          {{ $t('common.queryBtn') }}
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetQuery" icon="Refresh">{{ $t('common.resetBtn') }}</el-button>
      </el-form-item>
      <el-form-item>
      </el-form-item>
    </el-form>
    <!--endregion-->
    <!--region 表格区域-->
    <el-table :data="state.dataList" v-loading="state.loading" border stripe
              :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
               class="layout-padding-view" highlight-current-row
              @sort-change="sortChangeHandle">
      <el-table-column fixed="left"  type="index" label="#" width="60"/>
			<el-table-column fixed="left"  width="160" prop="barcode" label="条码"/>
      <el-table-column width="140" prop="billCode" :label="$t('checkStock.billcode')"/>
      <el-table-column width="120" prop="materialCode" :label="$t('checkStock.materialCode')"/>
      <el-table-column width="220" prop="materialName" :label="$t('checkStock.materialName')"/>
      <el-table-column min-width="290"  prop="materialSpec" :label="$t('checkStock.materialSpec')"/>
      <el-table-column width="100" prop="warehouseCode" :label="$t('mes.warehouse')"/>
      <el-table-column width="100" prop="unit" :label="$t('checkStock.unit')"/>
      <el-table-column width="100" prop="qrcode" :label="$t('checkStock.qrcode')"/>
      <el-table-column width="100" prop="warehouseName" :label="$t('checkStock.warehouseName')"/>
      <el-table-column width="200" prop="locationCode" :label="$t('checkStock.locationCode')"/>


      <el-table-column prop="checkUserName" :label="$t('checkStock.checkUserName')"/>
      <el-table-column prop="ckeckFlag" :label="$t('checkStock.ckeckFlag')">
				<template #default="scope">
					<el-tag type="danger" effect="light" v-if="scope.row.ckeckFlag == 'N'">{{ scope.row.ckeckFlag}}</el-tag>
					<el-tag type="primary" effect="light" v-if="scope.row.ckeckFlag == 'Y'">{{ scope.row.ckeckFlag}}</el-tag>
				</template>
			</el-table-column>
      <el-table-column prop="remark" width="140" :label="$t('checkStock.remark')"/>
			<el-table-column width="150" prop="checkQty" :label="$t('checkStock.checkQty')">
				<template #default="scope">
					<el-tag type="warning" effect="plain">{{scope.row.checkQty}}</el-tag>
				</template>
			</el-table-column>
			<el-table-column  align="left" width="150" prop="stockQty" :label="$t('checkStock.stockQty')">
				<template #default="scope">
					<el-tag type="primary" effect="plain">{{scope.row.stockQty}}</el-tag>
				</template>
			</el-table-column>
			<el-table-column width="150" fixed="right"  prop="differentQty" :label="$t('checkStock.differentQty')">
				<template #default="scope">
					<el-tag type="danger" v-if="scope.row.differentQty && scope.row.differentQty < 0" effect="plain">{{scope.row.differentQty}}</el-tag>
					<el-tag  v-else-if="scope.row.differentQty && scope.row.differentQty > 0" effect="plain">{{scope.row.differentQty}}</el-tag>
					<el-tag  v-else type="info" effect="plain">{{scope.row.differentQty}}</el-tag>
				</template>
			</el-table-column>
    </el-table>
    <pagination @size-change="sizeChangeHandle"  @current-change="currentChangeHandle"
                v-bind="state.pagination"/>
    <!--endregion-->
  </div>
</template>

<script setup lang="ts">
import {BasicTableProps, useTable} from "/@/hooks/table";
import {checkstockDGetPageSet} from "/@/api/platform/mes/wmsCheckstock";


const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  }
});
// 监听props.data的变化
watch(() => props.data, (newValue, oldValue) => {
  state.queryForm = newValue
  getDataList();
}, {deep: true})

// 重置搜索条件
const resetQuery = () => {
  // 清空搜索条件
  queryRef.value?.resetFields()
  // 清空多选
  getDataList();
}
const queryRef = ref(null)

// 表单
const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {},
  pageList: checkstockDGetPageSet
})
// 表格
const {
  getDataList,
  currentChangeHandle,
  sizeChangeHandle,
  sortChangeHandle,
  tableStyle
} = useTable(state)


</script>

<style scoped lang="scss">
.el-form-item {
  margin-bottom: 5px;
}
</style>